import * as React from 'react';
import styles from './styles/ColumnWrap.less';

const KeyValue = ({ label, value }: { label: string; value: string | number }) => (
  <div key={label} className={styles.field}>
    <div className={styles.label}>{label}</div>
    <div className={styles.sp}>:</div>
    <div className={styles.value}>{value}</div>
  </div>
);

// eslint-disable-next-line react/display-name
export default ({ data, renderItem }: { data: any[]; renderItem: (obj: any) => React.ReactNode }) => {
  const rows: React.ReactElement[] = [];
  const temp: React.ReactElement[] = [];
  data.forEach((v, i) => {
    temp.push(
      <div key={i} className={styles.col}>
        {renderItem(v)}
      </div>
    );
    if (((i + 1) & 1) === 0) {
      rows.push(
        <div key={i} className={styles.row}>
          {[...temp]}
        </div>
      );
      temp.length = 0;
    }
  });
  if (temp.length > 0) {
    rows.push(<div className={styles.row}>{[...temp]}</div>);
    temp.length = 0;
  }
  return <div>{rows}</div>;
};
